<template>

  <div>
    <div class="title">测试</div>
    <div class="cont">
      <!-- 第一行表格 五列 -->
      <div class="table">
          <div class="box">
            <div class="content1">姓名</div>
            <div class="content_border">测试人</div>
            <div class="content1">性别</div>
            <div class="content_border">男</div>
            <div class="content1">出生年月</div>
            <div class="content_border">1989-02-25</div>
            <div class="content1">参加工作时间</div>
            <div class="content_border">1989-02-25</div>
            <div class="content1">退休时间</div>
            <div class="content_border">1989-02-25</div>
          </div>
      </div>
      <!-- 第二行表格 三列 2-4 -->
      <div class="table">
          <div class="box">
            <div class="content1">职务</div>
            <div class="content_border">职务人员</div>
            <div class="content4">工资等级</div>
            <div class="content_border1">高级工九档</div>
            <div class="content1">参加工作时间</div>
            <div class="content_border">1989-02-25</div>
            <div class="content1">退休时间</div>
            <div class="content_border">1989-02-25</div>
        </div>
      </div>
      <!-- 第三行表格 三列 2-4 -->
      <div class="table">
          <div class="box">
            <div class="content1">教（护）龄</div>
            <div class="content_border">200</div>
            <div class="content1">工作年限</div>
            <div class="content_border">122</div>
            <div class="content1">军队工作年限</div>
            <div class="content_border">100</div>
            <div class="content4">基本退休费计发比例</div>
            <div class="content_border1">80</div>
        </div>
      </div>
      <div class="table">
        <td style="width:10%"><div class="content11">退休费基数</div></td>
        <td style="width:90%">
          <div class="box">
            <div class="content1">教（护）龄</div>
            <div class="content_border">200</div>
            <div class="content1">工作年限</div>
            <div class="content_border">122</div>
        </div>
        <div class="box">
            <div class="content1">教（护）龄</div>
            <div class="content_border">200</div>
            <div class="content1">工作年限</div>
            <div class="content_border">122</div>
        </div>
        <div class="box">
            <div class="content1">教（护）龄</div>
            <div class="content_border">200</div>
            <div class="content1">工作年限</div>
            <div class="content_border">122</div>
        </div>
        </td>
        
      </div>
      <!-- 第三行表格 一列-->
      <!-- <div class="table">
        <div class="content3">现场处理情况信息</div>
      </div> -->
      <!-- 第四行表格 二列 -->
      <div class="table">
        <template v-for="(item, index) in tableArr4">
          <div class="lump4" :key="index">
            <div :key="'info'+ index" :class="item.type == 2 ? 'conttent4' : 'conttent6'">
              <!-- 不是3隐藏 -->
              <template v-if="item.type !== 3">
                <div :class="item.type == 1 ? 'conttent6-title' : 'conttent4-title'">{{item.key+ '：'}}</div>
                <el-tooltip v-if="item.value.length > 20" class="item" :content="item.value" placement="top">
                  <div :class="item.type == 1 ? 'conttent6-txt' : 'conttent4-txt'">{{item.value}}</div>
                </el-tooltip>
                <div v-else :class="item.type == 1 ? 'conttent6-txt' : 'conttent4-txt'">{{item.value}}</div>
              </template>
              <!-- 评价 -->
              <template v-if="item.type == 3">
                <div class="conttent6-score">
                  <div class="conttent6-score-title">{{item.key+ '：'}}</div>
                  <el-row class="conttent6-score-affirm">
                    <el-col>维保工程师是否按约定时间上门：是</el-col>
                    <el-col>是否主动出示上岗工作牌：是</el-col>
                    <el-col>维护完毕是否逐项检验正常：是</el-col>
                    <el-col>维护完毕后是否清洁设备和现场：是</el-col>
                    <el-col>满意度：非常满意</el-col>
                  </el-row>
                </div>
              </template>
            </div>
            <div :key="index" :class="item.type == 2 ? 'conttent5' : 'conttent7'">
              <template v-if="item.type !== 3">
                <div :class="item.type == 1 ? 'conttent7-title' : 'conttent5-title'">{{item.key2+ '：'}}</div>
                <el-tooltip v-if="item.value2.length > 20" class="item" :content="item.value2" placement="top">
                  <div :class="item.type == 1 ? 'conttent7-txt' : 'conttent5-txt'">{{item.value2}}</div>
                </el-tooltip>
                <div v-else :class="item.type == 1 ? 'conttent7-txt' : 'conttent5-txt'">{{item.value2}}</div>
              </template>
              <!-- 签名 -->
              <template v-if="item.type == 3">
                <div class="conttent7-sign">
                  <div class="conttent7-sign-title">{{item.key2+ '：'}}</div>
                  <div class="conttent7-sign-txt">{{item.value2}}</div>
                </div>
              </template>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
  
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    tableArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableArr2: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableArr4: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {visible: false,}
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    test(id) {
      
      alert(id);
    },
  },
  components: {}
}
</script>

<style scoped lang="scss">
$titleColor: rgb(117, 117, 117);
$borderColor: 1px solid #e9e9e9;
.title {
  width: 100%; // 1200px
  margin: 0 auto;
  margin-top: 30px;
  padding: 20px 0;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  //background-color: #e1e1e1;
  // border: 1px solid #e1e1e1;
}
.cont {
  border-right: $borderColor;
}
.table {
  width: 100%; // 1200px
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.lump {
  width: 20%;
}
.lump2 {
  width: 40%;
}
.lump2:nth-child(3),
.lump2:nth-child(6),
.lump2:last-child {
  width: 20%;
}
.box {
  width: 100%;
  height: 40px;
  display: flex;
  border-top: $borderColor;
  .content1 {
    width: 40%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fafafa;
    border-left: $borderColor;
    border-bottom: $borderColor;
    color: $titleColor;
    font-size: 14px;
  }
  .content2 {
    width: 60%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border-left: $borderColor;
    border-bottom: $borderColor;
    color: 000;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
  .content4 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fafafa;
    border-left: $borderColor;
    border-bottom: $borderColor;
    color: $titleColor;
    font-size: 14px;
  }
  // .content2:last-child {
  //   border-right: $borderColor;
  // }
  .content_border {
    width: 60%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border-left: $borderColor;
    border-bottom: $borderColor;
    color: 000;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
  .content_border1 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border-left: $borderColor;
    border-bottom: $borderColor;
    color: 000;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
}
// 三列样式
.content3 {
  width: 100%;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  border: $borderColor;
  border-right: none;
  color: 000;
  font-size: 14px;
  font-weight: 600;
}
// 四列样式
.lump4 {
  width: 100%;
  display: flex;
  // align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  border: $borderColor;
  border-top: none;
  border-right: none;
  .conttent4 {
    display: flex;
    align-items: center;
    width: calc(48% - 1px);
    height: 40px;
    line-height: 40px;
    border-right: $borderColor;
    background-color: #fff;
    text-align: left;
    cursor: pointer;
    white-space: nowrap; //溢出不换行
    &-title {
      color: $titleColor;
      padding-left: 12px;
    }
    &-txt {
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }
  }
  .conttent5 {
    display: flex;
    align-items: center;
    width: 52%;
    height: 40px;
    line-height: 40px;
    text-align: left;
    background-color: #fff;
    cursor: pointer;
    white-space: nowrap;
    &-title {
      padding-left: 12px;
      color: $titleColor;
    }
    &-txt {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .conttent6 {
    width: calc(48% - 1px);
    min-height: 100px;
    text-align: left;
    // border-right: $borderColor;
    background: #fff;
    border-top: none;
    cursor: pointer;
    // white-space: nowrap;
    &-title {
      color: $titleColor;
      padding: 12px;
    }
    &-txt {
      padding: 0 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    // 评价
    &-score {
      padding: 12px;
      &-title {
        color: $titleColor;
      }
      &-affirm {
        padding: 12px;
        padding-left: 0;
        ::v-deep .el-col {
          padding-bottom: 12px;
        }
        ::v-deep .el-col:last-child {
          padding-bottom: 0;
        }
      }
    }
  }
  .conttent7 {
    width: calc(52% - 30px);
    min-height: 100px;
    text-align: left;
    background: #fff;
    border-left: $borderColor;
    cursor: pointer;
    &-title {
      color: $titleColor;
      padding: 12px;
    }
    &-txt {
      padding: 0 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    // 签名
    &-sign {
      display: flex;
      align-items: center;
      padding: 12px;
      &-title {
        color: $titleColor;
      }
    }
  }
  .content11 {
    width: 10%;
    height: 120px;
    line-height: 120px;
    text-align: center;
    background-color: #fafafa;
    border-left: $borderColor;
    border-bottom: $borderColor;
    color: $titleColor;
    font-size: 14px;
  }
}
</style>